<template>
  <div class="commit-chart-container">
    <div class="stats-header">
      <div class="total-commits">
        <span class="text-gray-600">累计提交总数：</span>
        <span class="text-xl font-bold text-blue-600">{{ totalCommits }}</span>
      </div>
    </div>
    <div ref="chartRef" class="chart-wrapper"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import { PersonCenterControllerService } from "../../backendapi";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const chartRef = ref<HTMLElement | null>(null);
let chart: echarts.ECharts | null = null;
const monthlyData = ref([]);
const totalCommits = ref(0);

const updateChart = () => {
  if (!chart) return;
  const option = {
    animation: false,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: monthlyData.value.map((item) => item.month),
      axisLabel: {
        interval: 0,
        rotate: 30,
      },
    },
    yAxis: {
      type: "value",
      name: "提交次数",
    },
    series: [
      {
        name: "月度提交数",
        type: "bar",
        data: monthlyData.value.map((item) => item.count),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" },
          ]),
        },
        label: {
          show: true,
          position: "top",
          formatter: "{c}",
        },
        barWidth: "40%",
      },
    ],
  };
  chart.setOption(option);
};
const router = useRouter();
const store = useStore();
// 从后端获取数据
const fetchData = async () => {
  try {
    const userId = store.state.user?.loginUser?.id; // 替换为实际的用户 ID
    const response = await PersonCenterControllerService.getRecentZhuUsingGet(
      userId
    );
    if (response.data) {
      monthlyData.value = response.data;
      totalCommits.value = monthlyData.value.reduce(
        (sum, item) => sum + item.count,
        0
      );
      updateChart();
    }
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

onMounted(() => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value);
    fetchData();
    // 响应容器尺寸变化
    window.addEventListener("resize", () => {
      chart?.resize();
    });
  }
});

onUnmounted(() => {
  chart?.dispose();
  window.removeEventListener("resize", () => {
    chart?.resize();
  });
});
</script>

<style scoped>
.commit-chart-container {
  border-radius: 8px;
}
.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.chart-wrapper {
  width: 100%;
  height: 400px;
}
.total-commits {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
